π
π
π
π
React
Searchβ¦
π
π
π
π
React
index
General Notes
Review-Of-Previous-Concepts
Reiew
Understanding By Example
Spread and Rest
REACT-RESOURCES
index
React-Resources
Thinking in React
Composition vs Inheritance
Using Web Components in React
REACT ENVIORMENT
Hello World
Components And Props
JSX
projects
Project Examples
Prerequisites
Prerequisites
Advanced
Advanced
MY_DOCS
Docs
React Components
Composition vs Inheritance
Methodologies
Node.js versus Next.js - A React Approach
Interview
Question Set #1:
Powered By
GitBook
Understanding By Example
Functions:
1
# Function Context Cheatsheet
2
β
3
## Types
of
Invocation
4
-
Applies to only
**
named
**
and
**
unnamed
**
functions
5
-
**
Doesn't matter
**
for
fat arrow functions
6
β
7
### Function
-
style invocation
8
-
Context
of
the
function
will be global context
**
UNLESS
**
binded
9
β
10
### Method
-
style invocation
11
-
Context
of
the
function
will be the object which the
function
is called on
**
UNLESS
**
binded
12
β
13
`
`
`javascript
14
const
obj
=
{
15
name
:
'Example Object'
,
16
unnamedFunc
:
function
(
)
{
17
console
.
log
(
this
.
name
)
;
18
}
19
}
;
20
β
21
// Method-style invocation
22
obj
.
unnamedFunc
(
)
;
// 'Example Object'
23
β
24
// Function-style invocation
25
const
unnamedFunc
=
obj
.
unnamedFunc
;
26
unnamedFunc
(
)
;
// Global context
Copied!
Types of Functions
Named Function
explicit
return
keyword required
curly braces
{}
around function body
NOT
saved to a variable
parameters must be surrounded by parentheses
()
context is defined by how it's invoked or called
function-style: global context
method-style: context is object that function is being called on
calling
bind
on the function will return a function binded to the context of the
bind
argument
1
function
namedFunc
(
params
)
{
2
return
'named function'
3
}
Copied!
1
// bindedNamedFunc will have the context of obj
2
const
bindedNamedFunc
=
namedFunc
.
bind
(
obj
)
;
Copied!
Unnamed Function
explicit
return
keyword required
curly braces
{}
around function body
MUST
be saved to a variable
parameters must be surrounded by parentheses
()
context is defined by how it's invoked or called
function-style: global context
method-style: context is object that function is being called on
calling
bind
on the function will return a function binded to the context of the
bind
argument
1
const
unnamedFunc
=
function
(
params
)
{
2
return
'unnamed function'
3
}
Copied!
1
// bindedUnnamedFunc will have the context of obj
2
const
bindedUnnamedFunc
=
unnamedFunc
.
bind
(
obj
)
;
Copied!
Explicit Fat Arrow Function
explicit
return
keyword required
curly braces
{}
around function body
MUST
be saved to a variable
parameters must be surrounded by parentheses
()
IF more than one parameter
takes the context of where it's defined
CANNOT
be binded using
bind
1
const
explicitFatArrow
=
params
=>
{
2
return
'explicit fat arrow function'
3
}
;
Copied!
Implicit Fat Arrow Function
NO
return
keyword
function body can only consist of what is being returned
Optional parentheses
()
around function body
NOTE: Parentheses needs to be used if returning an object
ex: ({ key: value })
MUST
be saved to a variable
parameters must be surrounded by parentheses
()
IF more than one parameter
takes the context of where it's defined
CANNOT
be binded using
bind
1
const
implicitFatArrow
=
(
params
)
=>
'implicit fat arrow function'
;
Copied!
1
const
implicitFatArrow
=
(
params
)
=>
(
'implicit fat arrow function'
)
;
Copied!
1
const
implicitFatArrow
=
(
params
)
=>
(
{
2
function
:
'implicit fat arrow'
3
}
)
;
Copied!
Bind
bind
accepts multiple arguments
first argument is the context that you want to bind the function to
any arguments that come afterwards will be passed in when the bound function is called
BEFORE
the call time arguments
```
1
// Arrow Functions
2
// 1. Syntax
3
// 2. Scoping with Arrow Functions
4
β
5
function
logger
(
title
,
body
)
{
6
console
.
log
(
"\x1b[31m%s\x1b[0m"
,
title
)
;
7
console
.
log
(
' '
,
body
)
;
8
}
9
β
10
// Named Function
11
function
sayHelloNamed
(
name
)
{
12
return
'hello '
+
name
;
13
}
14
β
15
logger
(
'Named Function'
,
sayHelloNamed
(
'Justin'
)
)
;
16
β
17
// Unnamed Function
18
const
sayHelloUnnamed
=
function
(
name
)
{
19
return
'hello '
+
name
;
20
}
;
21
β
22
logger
(
'Unnamed Function'
,
sayHelloUnnamed
(
'Soon-Mi'
)
)
;
23
β
24
β
25
β
26
β
27
β
28
β
29
β
30
// Fat Arrow Function with EXPLICIT return
31
// curly braces around body of fat arrow functions need explicit return keyword
32
// const sayHelloExplicit = (name) => {
33
// return 'hello ' + name;
34
// };
35
β
36
// No parentheses surrounding parameter needed if ONLY one parameter
37
const
sayHelloExplicit
=
name
=>
{
38
return
'hello '
+
name
;
39
}
;
40
β
41
logger
(
'Fat Arrow Function with Explicit Return'
,
sayHelloExplicit
(
'Gordon'
)
)
;
42
β
43
β
44
β
45
β
46
β
47
β
48
β
49
β
50
β
51
β
52
β
53
β
54
// Fat Arrow Function with IMPLICIT return
55
// Also called a One-Liner Fat Arrow function
56
// should only use this when the function's body is NOT multi-line
57
const
sayHelloImplicit
=
(
name
)
=>
'hello'
+
name
;
58
β
59
// can use parentheses around function body as well
60
// const sayHelloImplicit = (name) => ({
61
// hello: 'Angela'
62
// });
63
β
64
// notice the semicolon ; at the end
65
β
66
logger
(
'Fat Arrow Function with Implicit Return'
,
sayHelloImplicit
(
'Angela'
)
)
;
67
β
68
β
69
β
70
β
71
β
72
β
73
console
.
log
(
'\n--------------\n'
)
;
74
β
75
β
76
β
77
β
78
// Example using fat arrow functions
79
const
arr
=
[
1
,
2
,
3
]
;
80
β
81
const
newArr
=
arr
.
map
(
el
=>
{
82
return
el
+
2
;
83
}
)
;
84
// const newArr = arr.map(function(el) {
85
// return el + 2;
86
// });
87
β
88
logger
(
'Original Array, `arr`'
,
arr
)
;
89
logger
(
'New Mapped Array, `newArr`'
,
newArr
)
;
90
β
91
β
92
β
93
β
94
console
.
log
(
'\n--------------\n'
)
;
95
β
96
β
97
β
98
β
99
β
100
β
101
// Context using Fat Arrow functions
102
const
pony
=
{
103
name
:
'Lucy'
,
104
wrappedSayName
:
function
(
)
{
105
console
.
log
(
this
.
name
)
;
106
return
function
(
)
{
107
console
.
log
(
this
.
name
)
;
108
console
.
log
(
'Hello my name is '
+
this
.
name
)
;
109
}
110
}
,
111
wrappedArrowSayName
:
function
(
)
{
112
console
.
log
(
this
.
name
)
;
113
return
(
)
=>
{
114
console
.
log
(
'Hello my name is '
+
this
.
name
)
;
115
}
116
}
117
}
;
118
β
119
pony
.
wrappedSayName
=
pony
.
wrappedSayName
.
bind
(
pony
)
;
120
let
wrap
=
pony
.
wrappedSayName
(
)
.
bind
(
pony
)
;
// method-style invocation
121
wrap
(
)
;
// function-style invocation
122
β
123
console
.
log
(
'-----------'
)
;
124
β
125
wrap
=
pony
.
wrappedArrowSayName
(
)
;
// method-style invocation
126
wrap
(
)
;
127
β
128
console
.
log
(
'-----------'
)
;
129
β
130
const
arrowSayName
=
pony
.
wrappedArrowSayName
;
// not invoking
131
wrap
=
arrowSayName
(
)
;
// function-style invocation
132
wrap
(
)
;
133
β
134
β
135
β
136
// bound to the context of wherever it's defined
137
β
138
β
139
β
140
β
141
β
142
β
143
console
.
log
(
'-----------'
)
;
144
β
145
const
zoomMeeting
=
{
146
students
:
[
'Christian'
,
'Ronald'
,
'Wren'
]
,
147
listStudent
:
function
(
studentName
)
{
148
console
.
log
(
this
.
students
)
;
149
// console.log(studentName);
150
}
,
151
listStudents
:
function
(
)
{
152
const
listStudent
=
this
.
listStudent
;
153
listStudent
(
)
;
// function-style
154
console
.
log
(
'***'
)
;
155
this
.
students
.
forEach
(
listStudent
)
;
156
}
157
}
;
158
β
159
zoomMeeting
.
listStudents
(
)
;
Copied!
Scope:
1
// Global Scope
2
β
3
let
cities
=
[
"NYC"
,
"SF"
]
;
4
β
5
//console.log(cities);
6
β
7
β
8
β
9
β
10
// Local / Function Scope
11
β
12
β
13
function
sayThings
(
)
{
14
// let cities = ['Bogota', 'Madrid'];
15
// console.log(cities);
16
β
17
let
word
=
'dinosaur'
;
18
console
.
log
(
word
)
;
19
}
20
β
21
// console.log(cities); // prints NYC & SF
22
// console.log(word); // ReferenceError
23
//sayThings();
24
β
25
β
26
β
27
β
28
β
29
β
30
β
31
β
32
β
33
β
34
// Block Scope
35
β
36
if
(
true
)
{
37
let
cats
=
[
'Roma'
,
'Luigi'
]
;
38
//console.log(cats); // prints Roma & Luigi
39
}
40
β
41
//console.log(cats) // ReferenceError
42
β
43
// This example was extended to show how scope within nested blocks works
44
// As Justin pointed out, it also leads directly into closures
45
β
46
let
carrot
=
'snake'
;
47
β
48
if
(
true
)
{
49
let
carrot
=
'doggie!'
;
50
//console.log(carrot);
51
if
(
true
)
{
52
carrot
=
'carrot'
;
53
console
.
log
(
carrot
)
;
// prints carrot
54
}
55
for
(
let
i
=
1
;
i
<
5
;
i
++
)
{
56
console
.
log
(
`
i is
${
i
}
`
)
;
57
}
;
58
//console.log(`i is ${i}`); // reference error
59
console
.
log
(
"line 57:"
,
'george'
,
carrot
)
;
60
}
61
β
62
console
.
log
(
carrot
)
;
// prints snake
Copied!
Closure
1
// Closure
2
// When an inner function uses, or changes,
3
// variables defined in an outer scope.
4
// NOT for declaring a variable of the same name in an inner scope.
5
function
sayHi
(
)
{
6
let
name
=
'Bryan Guner'
;
7
β
8
function
greeting
(
)
{
9
// here greeting function closes over, or captures, the name variable
10
// to read it's value
11
return
"Hi there, "
+
name
+
"!"
;
12
}
13
// Here, we return the return value of the greeting function
14
return
greeting
(
)
;
15
}
16
// console.log(sayHi());
17
function
nameAndCity
(
)
{
18
let
person
=
{
19
name
:
'Sergey'
,
20
city
:
'Moscow'
21
}
;
22
β
23
function
changeCity
(
)
{
24
// here changeCity function closes over the person variable
25
// and reassigns a value on an existing key
26
person
.
city
=
'Toronto'
;
27
}
28
changeCity
(
)
;
29
// the person variable will show the changes from the changeCity function
30
return
person
;
31
}
32
// console.log(nameAndCity());
33
function
smoothieMaker
(
)
{
34
let
ingredients
=
[
]
;
35
β
36
function
addIngredient
(
ingredient
)
{
37
// Here addIngredient function closes over the ingredients variable
38
// to push new elements into the ingredients variable.
39
// We have created a private state where we cannot access
40
// the ingredients array from the outside and can only access
41
// the variable from the inner function.
42
ingredients
.
push
(
ingredient
)
;
43
return
ingredients
;
44
}
45
// Here the return value for smoothiemaker is the return value
46
// is the function addIngredient, NOT addIngredient's return value
47
return
addIngredient
;
48
}
49
// Here we initialize we return a new addIngredient function
50
// which has closed over the ingredients array
51
const
makeSmoothie
=
smoothieMaker
(
)
;
52
console
.
log
(
makeSmoothie
)
;
53
console
.
log
(
makeSmoothie
(
'spinach'
)
)
;
// prints [ spinach ]
54
console
.
log
(
makeSmoothie
(
'turmeric'
)
)
;
// prints [ spinach, turmeric ]
55
// let mySmoothie = makeSmoothie();
56
// Here we return a new and different addIngredient function
57
// which has closed over a new a different ingredients array
58
const
makeSmoothie2
=
smoothieMaker
(
)
;
59
console
.
log
(
makeSmoothie2
(
'kale'
)
)
;
// prints [ kale ] -- does not include spinach and turmeric
60
function
createCounter
(
)
{
61
let
count
=
0
;
62
return
function
(
)
{
63
count
++
;
64
return
count
;
65
}
66
}
67
let
counter1
=
createCounter
(
)
;
68
let
counter2
=
createCounter
(
)
;
69
// console.log(counter1());
70
// console.log(counter1());
71
// console.log(counter1());
72
// console.log(counter1());
73
// What will this print out?
74
// console.log(counter2());
75
// Brief talk of scope and redeclaring a const variable in a loop
76
for
(
let
i
=
0
;
i
<
5
;
i
++
)
{
77
const
num
=
i
+
2
;
78
}
79
β
80
β
81
// In the following examples we will predict what will
82
// be printed to the terminal
83
β
84
β
85
β
86
β
87
β
88
β
89
// 1
90
β
91
function
dinerBreakfast
(
food
)
{
92
let
order
=
"I'd like cheesy scrambled eggs and "
;
93
β
94
function
finishOrder
(
)
{
95
return
order
+
food
;
96
}
97
β
98
return
finishOrder
(
)
;
99
}
100
β
101
// console.log(dinerBreakfast('green tea'));
102
β
103
β
104
β
105
β
106
β
107
β
108
β
109
β
110
β
111
// 2
112
β
113
function
dinerBreakfast2
(
food
)
{
114
let
order
=
"I'd like a(n) "
+
food
;
115
β
116
function
withEggs
(
)
{
117
order
=
order
+
' and cheesy scrambled eggs, please!'
118
}
;
119
β
120
withEggs
(
)
;
121
return
order
;
122
}
123
β
124
// console.log(dinerBreakfast2('avocado toast'));
125
β
126
β
127
β
128
β
129
β
130
β
131
β
132
β
133
β
134
// 3
135
β
136
function
dinerBreakfast3
(
)
{
137
let
order
=
"I'd like cheesy scrambled eggs"
;
138
β
139
return
function
(
food
)
{
140
order
=
order
+
" and "
+
food
;
141
return
order
;
142
}
143
}
144
β
145
let
breakfastOrder
=
dinerBreakfast3
(
)
;
146
β
147
console
.
log
(
breakfastOrder
)
;
148
console
.
log
(
breakfastOrder
(
'cappuccino'
)
)
;
149
console
.
log
(
breakfastOrder
(
'pancakes'
)
)
;
Copied!
Context:
1
// In the following examples we will predict what will
2
// be printed to the terminal
3
β
4
β
5
function
whatIsThis
(
)
{
6
console
.
log
(
this
)
;
7
}
8
β
9
const
pony
=
{
10
name
:
"Lucy"
,
11
whatIsThis
:
function
(
)
{
12
console
.
log
(
this
)
;
13
}
,
14
sayName
:
function
(
)
{
15
console
.
log
(
'Hello my name is '
+
this
.
name
)
;
16
}
,
17
changeName
:
function
(
newName
)
{
18
this
.
name
=
newName
;
19
this
.
sayName
(
)
;
20
}
21
}
22
β
23
β
24
// 1.
25
// whatIsThis();
26
β
27
β
28
// 2.
29
// pony.whatIsThis();
30
β
31
β
32
// 3.
33
// pony.sayName();
34
β
35
β
36
// 4.
37
// pony.changeName("Layla");
38
β
39
β
40
// 5.
41
// const sayNameFunc = pony.sayName;
42
// sayNameFunc();
43
β
44
β
45
// 6.
46
// const boundSayName = pony.sayName.bind(pony);
47
// boundSayName();
48
β
49
β
50
// 7.
51
const
bart
=
{
52
name
:
'Bart'
53
}
54
β
55
const
boundToBart
=
pony
.
sayName
.
bind
(
bart
)
;
56
// boundToBart();
57
β
58
β
59
// 8.
60
const
changeBartsName
=
pony
.
changeName
.
bind
(
bart
)
;
61
changeBartsName
(
'Sergey'
)
;
62
β
63
β
64
// Context
65
// What does the keyword 'this' refer to?
66
// The context is determined by HOW a function is invoked
67
β
68
β
69
// Different ways of invoking a function
70
// function style
71
// context is set to the global object
72
// 'this' refers to the global object
73
// method style
74
// context is set to the object on which the method is called
75
// 'this' refers to the object on which the method is called
76
β
77
β
78
// How to ensure bind never change the context of a function
79
// no matter how it is invoked.
80
// .bind()
81
// By adding .bind() to the end of a function we set the context
82
// to equal the argument passed to .bind()
83
// 'this' will refer to the argument passed to .bind()
84
β
85
β
86
// Scope VS Context
87
// VERY DIFFERENT THINGS!!
88
β
89
// Scope:
90
// Availability of variables at a line in your application
91
// Context:
92
// The value of this
93
// Determined by how a function has been invoked or the .bind() method
94
β
95
β
96
β
97
β
98
const
cat
=
{
99
name
:
'Luigi'
,
100
age
:
2
,
101
whatIsThis
:
function
(
)
{
102
console
.
log
(
this
)
;
103
}
,
104
nameAndAge
:
function
(
)
{
105
console
.
log
(
this
.
name
+
" is "
+
this
.
age
+
" years old."
)
106
}
107
}
;
108
β
109
// cat.whatIsThis();
110
// cat.nameAndAge();
111
β
112
const
nameAndAgeFunc
=
cat
.
nameAndAge
;
113
nameAndAgeFunc
(
)
;
114
β
115
const
boundNameAndAge
=
cat
.
nameAndAge
.
bind
(
cat
)
;
116
// boundNameAndAge();
117
β
118
β
119
β
120
β
121
β
122
β
123
β
124
β
125
const
cat2
=
{
126
name
:
'Roma'
,
127
age
:
3
128
}
129
β
130
function
nameAndAge
(
)
{
131
console
.
log
(
this
.
name
+
" is "
+
this
.
age
+
" years old."
)
;
132
}
133
β
134
const
dog
=
{
135
name
:
'Napo'
,
136
age
:
5
137
}
138
β
139
const
catNameAge
=
nameAndAge
.
bind
(
cat2
)
;
140
const
dogNameAge
=
nameAndAge
.
bind
(
dog
)
;
141
β
142
catNameAge
(
)
;
143
dogNameAge
(
)
;
144
β
145
β
146
β
147
β
148
β
149
const
obj
=
{
150
name
:
'Example Object'
,
151
unnamedFunc
:
function
(
)
{
152
console
.
log
(
this
.
name
)
;
153
}
154
}
;
155
β
156
// Method-style invocation
157
obj
.
unnamedFunc
(
)
;
// 'Example Object'
158
β
159
// Function-style invocation
160
const
unnamedFunc
=
obj
.
unnamedFunc
;
161
unnamedFunc
(
)
;
// `undefined` because Global context
162
β
163
β
164
β
165
β
166
β
167
console
.
log
(
'-------------------'
)
;
168
β
169
β
170
β
171
β
172
β
173
β
174
// Unnamed Func
175
const
dog
=
{
176
name
:
'Digby'
177
}
;
178
β
179
const
boundFunc
=
obj
.
unnamedFunc
.
bind
(
dog
)
;
180
boundFunc
(
)
;
// Digby
181
obj
.
unnamedFunc
(
)
;
// Example Object
182
β
183
β
184
β
185
β
186
β
187
β
188
β
189
console
.
log
(
'-------------------'
)
;
190
β
191
β
192
β
193
β
194
// Bind Time and Call Time Arguments
195
// bind time arguments passed in first, then call time arguments
196
function
printAge
(
...
args
)
{
197
const
age
=
args
[
0
]
;
198
const
year
=
args
[
1
]
;
199
console
.
log
(
args
)
;
200
console
.
log
(
this
.
name
+
' is '
+
age
+
' years old. Born in '
+
year
)
;
201
}
202
β
203
const
otherArgs
=
[
2005
]
;
204
β
205
const
printDigby
=
printAge
.
bind
(
dog
,
12
,
...
otherArgs
)
;
206
printDigby
(
2000
)
;
207
printDigby
(
2008
)
;
208
β
209
// const printRealDigby = printAge.bind(dog, 4);
210
// printRealDigby(2002);
Copied!
Previous
Reiew
Next
Spread and Rest
Last modified
1mo ago
Copy link
Contents
Functions:
Types of Functions
Named Function
Unnamed Function
Explicit Fat Arrow Function
Implicit Fat Arrow Function
Bind
Scope:
Closure
Context: